import { Meta } from '@storybook/html';

import { TwemojiRenderer } from '../../packages/renderer-twemoji/src/index';
import { lightTheme, darkTheme, autoTheme, NativeRenderer } from '../../packages/picmo/src/index';

export function toElement<E extends Element = HTMLElement>(html: string): E {
  const template = document.createElement('template');
  template.innerHTML = html;

  return template.content?.firstElementChild as E;
}

export function getArgs(extraArgs): Meta {
  return {
    title: extraArgs.title,
    args: {
      theme: 'lightTheme',
      renderer: 'native',
      uiElements: ['showRecents', 'showCategoryTabs', 'showSearch', 'showVariants', 'showPreview'],
      ...extraArgs.args
    },
    argTypes: {
      emojiSelect: { 
        action: 'emoji:select',
        table: { disable: true }
      },
      uiElements: {
        name: 'UI elements',
        control: {
          type: 'inline-check',
          labels: {
            showRecents: 'Recents',
            showCategoryTabs: 'Category tabs',
            showSearch: 'Search',
            showPreview: 'Preview',
            showVariants: 'Variants'
          }
        },
        options: ['showRecents', 'showCategoryTabs', 'showSearch', 'showVariants', 'showPreview']  
      },
      theme: {
        name: 'Color theme',
        options: ['lightTheme', 'darkTheme', 'autoTheme'],
        mapping: {
          lightTheme,
          darkTheme,
          autoTheme
        },
        control: {
          type: 'select',
          labels: {
            lightTheme: 'Light',
            darkTheme: 'Dark',
            autoTheme: 'Auto'
          }
        }
      },
      renderer: {
        name: 'Emoji renderer',
        options: ['native', 'twemoji-svg', 'twemoji-png'],
        mapping: {
          native: new NativeRenderer(),
          'twemoji-svg': new TwemojiRenderer('svg'),
          'twemoji-png': new TwemojiRenderer('png')
        },
        control: {
          type: 'select',
          labels: {
            native: 'Native',
            'twemoji-svg': 'Twemoji (SVG)',
            'twemoji-png': 'Twemoji (PNG)'
          },
          
        }
      },
      ...extraArgs.argTypes
    }
  };
}

export const customEmojis = [
    { 
      emoji: 'kitty1', 
      label: 'Cute kitty', 
      url: 'https://placekitten.com/200/200', 
      tags: ['cute', 'cat', 'kitty'],
      data: {
        id: 1
      }
    },
    {
      emoji: 'conga-parrot',
      label: 'Conga parrot',
      url: '',
      data: {
        id: 2
      }
    }
];
